import Taro, {Component, Config} from "@tarojs/taro";
import { View, Text, Image, RichText } from "@tarojs/components";
import { AtToast } from "taro-ui"
import {IStoreProps} from '../../store/Stores';
import {getRuntime} from '../../utils/common';
import {toJS} from "mobx";
import {inject, observer} from "@tarojs/mobx";

import '../dynamic/detail.less'
import iconCollection from '../../assets/img/icon_03.png'
import iconCollection_on from '../../assets/img/icon_03_on.png'
import iconShare from '../../assets/img/icon_04.png'


interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Detail extends Component<IHomeProps>{
  config:Config = {
    navigationBarTitleText: '公告详情'
  }

  constructor(props){
    super(props)
  }

  state = {
    item: {},
    isCollection: false,
    isTips: false,
    tipsText: ''
  }
  componentWillMount() {
    this.getDynamicInfo(this.$router.params.id)
  }

  toggleCollection(){
    let { userStore } = this.props.stores
    this.setState({
      isCollection: !this.state.isCollection
    }, () => {
      console.log(this.state.isCollection)
      if(this.state.isCollection){
        // 收藏
        userStore.saveUserCollection({
          form: {
            dynamicsId:parseInt(this.$router.params.id),
            userCollectionType:0
          },
          callback: () => {
            this.setState({isTips: true, tipsText: '收藏成功~'})
          }
        })
      }else {
        // 取消收藏
        userStore.cancelUserCollection({
          form: {
            id: parseInt(this.$router.params.id),
            userCollectionType: 0,
          },
          callback: () => {
            this.setState({isTips: true, tipsText: '取消收藏成功~'})
          }
        })
      }
    })
  }

  getDynamicInfo(id) {
    let dynamicStore = this.props.stores.DynamicStore
    dynamicStore.getDynamicInfo({
      id,
      callback: res => {
        // console.log(res)
        this.setState({
          item: toJS(res),
          isCollection: toJS(res.isCollection)
        })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  render() {
    let { item, isCollection,isTips,tipsText } = this.state
     return(
      <View className='article-wrap'>
       <View className='article-info'>
         <View className='title'>
           {item.title}
         </View>
         <Text className='source'>{item.author}</Text>
         <Text className='date'>{item.author}</Text>
       </View>
        <View className='article'>
          <RichText nodes={item.content} />
        </View>

        <View className='footer-block' />
        <View className='footer'>
          <View className='read-count'>{item.readAmount}次浏览</View>
          <View className='share'>
            <View className='collection' onClick={this.toggleCollection.bind(this)}>
              {!isCollection&&  <Image  className='collection-img' src={iconCollection} />}
              {isCollection&&  <Image  className='collection-img' src={iconCollection_on} />}
              收藏
            </View>
            <View className='collection'>
              <Image className='share-img' src={iconShare} />
              分享
            </View>
          </View>
        </View>

        <AtToast isOpened={isTips} text={tipsText} />
      </View>
    )
  }
}

export default Detail
